<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
     <script src="../js/vue.min.js"></script>
	</head>
	<body>
<!--当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。
-->
		<div id="vue_det">
		    <h1>{{site}}</h1>
		    <h1>{{url}}</h1>
		    <h1>{{alexa}}</h1>
		</div>
		<script type="text/javascript">
		// 我们的数据对象定在外头：创建vue实例中引用
		var data88 = { site: "6666", url: "www.runoob.com", alexa: 10000}
		var vm = new Vue({
		    el: '#vue_det',
		    data: data88
		})
		// 它们引用相同的对象！
		document.write(vm.site == data88.site) // true
		document.write("<br>")
		// 设置属性也会影响到原始数据
		vm.site = "更改属性的值"
		document.write(data88.site + "<br>") // Runoob
		 
		// ……反之亦然
		data88.alexa = 1234
		document.write(vm.alexa) // 1234
		</script>
	</body>
</html>
